React Native学习笔记
1. react-native init AwesomeProject原因分析:react-native 0.55.6版本的问题,需要在init项目的时候指定老版本号,比如0.55.4解决方案:react-native init AwesomeProject -- version 0.55.42. react-native run-android Execution failed for task ‘:app:prepareSrolkReactNativeFilePickerUnspecifiedLibra...
2024-01-10React Native_环境编译
官方环境搭建一、两种方式运行程序1、指令运行:react-native run-android。运行结果如下图通过指令运行结果二:直接通过android studio运行二、遇到的问题1、unable to load script.make sure you're either running a metro server。如下图所示。标题异常图像a:通过指令启动时没有启动metro server解决方法:1:运行 adb rev...
2024-01-10React-Native -课后练习
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native';class meituan extends Component { render() { return ( <View> <View style={[styles.view_row,styles.height_160]}> ...
2024-01-10React-Native踩坑记录二
1.Image组件的borderRadius画圆有平台兼容性问题,在IOS下会失效解决方法有几种(1)在外面包裹一层View,对View组件使用borderRadius就可以了,这是我的做法(2)在同一级属性块下加上overflow: 'hidden',我没试过,大家可以阅读下面的链接https://www.jianshu.com/p/d237f02584182.React-Native的渐变实现方案(1) 使用react-native-li...
2024-01-10React Native View组件实例
我们如何通过RN实现如图所示的效果:一:图形分析1.1:图形分为3列,我们设置flexDirection为“”row”,每个View独占1/3,flex设置为11.2:2,3列先把图形均分为上下两部分,填充内容1.3:给2,3列设置边框二:代码实现按照一的分析,实现逻辑如下:2.1:把布局分为3部分2.2:分别填充内容2.3:添加...
2024-01-10React Native获取组件位置和大小
RN页面中定位或滚动操作时,需要获取元素的大小和位置信息,有几种常用的方法获取设备屏幕的宽高import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');获取元素的大小和位置信息1. onLayout事件属性<View onLayout={this._onLayout}><View>_onLayout = (e) => { let {x,y,width,height} = e.nativeE...
2024-01-10React Native滑出面板和滚动视图
我正在开发与本机反应的应用程序。我有一个UI元素,它与iOS中的Maps相似,在其中您可以从底部滑动面板,在面板内部有一个可滚动的列表。对于滑出式面板,我使用的组件称为rn-sliding-up-panel。它有几个道具可以作为事件监听器。例如<SlidingUpPanel allowDragging={/*Boolean*/} onDragStart={()=>{} /*When it is about...
2024-01-10React Native开发之expo的使用
背景react native官方现在推荐的项目构建方式是create-react-native-app,即简称CRNA,并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后,命令行输入npm start,随即会为开发者创建一个开发服务器,并打印出大大的二维码,使用expo扫码,即可预览项目,不过真的这么丝滑吗,使用中还是遇到了一些...
2024-01-10React-Native集成dva.js
dvajs作为一个基于redux的状态管理框架,在react中的表现还是很不错的,如果我们想要在react-native应用中使用dvajs该怎么做呢?首先安装dva-core和react-redux:npm i -S dva-core react-reduxdva-core是dvajs的核心部分,能够很好的和其他react-native组件在一起工作。dva-core和dva在提供的方法上有一些区别,不过在使用思...
2024-01-10React Native悬浮按钮组件的示例代码
React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --savereact-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件,需要做下link。如果你项目中已经使用了react-na...
2024-01-10React Native 项目iOS真机调试红屏
错误信息:反应本地版本不匹配。javascript版本xx.xx.xx本地版本xx.xx.xx原因:开启的反应原生服务与你当前运行的反应原生项目不一致造成的。解决办法:打开终端,将路径切到RN项目下,并执行npm start待服务开启后,在iphone设备端,摇晃会reload js即可。侵权请联系我删除。...
2024-01-10【React】如何调试React Native?
根据rn的教程中,我把远程的json换成本地的json,但仍然报错,没办法得知到底哪里不对了,目前只知道alert方法。。var REQUEST_URL = 'http://172.20.10.2:8000/rnDemo/movies.json';....componentDidMount: function() {this.fetchData();},fetchData: function() {fetch(REQUEST_URL).then((response) => response.json())....
2024-01-10[RN] React Native 下拉放大动画
React Native 下拉放大动画经测试,无法运行https://www.jianshu.com/p/1c960ad75020...
2024-01-10React Native安卓项目打包发布APK步骤
1、产生签名的key该过程会用到keytool,开发过安卓的都应该接触过该东西。详细请见密钥和证书管理工具。在项目的主目录(不是android文件夹)中执行:--生成签名key,注意记下你的密钥和存储密码,后面配置文件需要使用keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -val...
2024-01-10在Mac系统下搭建React Native开发环境
这里记录一下在Mac系统下搭建React Native开发环境的过程: 1. 安装HomeBrew:1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装完后如下所示: \ 可使用命令:”brew -v“查看其版本。 2. 安装Node.JS: brew install node,也可以在node.js官网下载pkg安装包进...
2024-01-10React-Native 之 Modal介绍与使用
前言遗漏的常用组件,刚发现官方有提供,这边也来介绍一下。如本文有错或理解偏差欢迎联系我,会尽快改正更新!如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我。本章涉及资源下载:链接: https://pan.baidu.com/s/1o84o6JS 密码: htx6属性animationType(动画类型) PropTypes.oneOf(['none', 'slide', '...
2024-01-10使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html⒉安装React Native官方的脚手架工具npm install -g @react-native-community/cli⒊使用React Native脚手架初始化项目#默认是JavaScriptnpx react-native init ts_react_native#可以直接使用TypeScript初始化npx react-native init ts_r...
2024-01-10React Native 仿 ofo 共享单车 App
本文为 Marno 原创,转载必须保留出处!公众号【 aMarno 】,关注后回复 RN 加入交流群React Native 优秀开源项目大全:http://www.marno.cnhttp://www.jianshu.com/p/6d7bac35af46一、前言并没有实现 ofo 所有功能,只完成了主要的界面和逻辑,感觉其中也就【地图】和【扫码】两个比较核心的功能还需要花点时...
2024-01-10React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的。悲催。然后,最近项目也不是很紧了,所以抽空学习了H5。自学啃书还是很无趣的,虽然Head First Html5 Programming(中文版)这本书讲的很有意思,但是学习了大半本就想自己动手练练,所以...
2024-01-10React Native Css简介及其与前端Css不同
Css简介作为一名前端工作者对css都是非常熟悉的,前端三要素为结构html表现css及行为js。结构负责整个页面的骨架,展现其主要内容,表现相当于外貌,使其更为丰满可观,而行为则负责人机交互以及一些复杂的动态效果。css遵循其语言规范进行工作,其语法结构也是非常的简单。本文不在此赘述css...
2024-01-10React Native向特定的WhatsApp发送消息
我正在尝试从本机应用程序向WhatsApp联系人发送文本消息,我发现我可以通过链接来做到这一点Linking.openURL('whatsapp://send?text=hello');上面的代码仅打开whats应用程序,我需要打开一个具有特定号码的聊天记录,是否有我必须像文本一样发送的参数?回答:您可以使用它向特定号码发送消息:Linking.openUR...
2024-01-102019年React Native入门:构建第一个应用程序
了解如何使用重要的基本概念构建您的第一个React Native应用程序以及从这里出发的去处! 信用: https : //unsplash.com/@nateggrant 我们生活在各种各样的移动设备中,这些设备主要由iOS和Android两个平台主导。 这是一场两匹马的比赛,我相信我们都可以对此表示同意。 但是,构建移动应用程序并非易事...
2024-01-10beeshell 开源的 React Native 组件库
背景beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 Native 代码),涉及前端(FE)、iOS、Android 三端技术,兼顾通用性和定制化,支持自定义主题,用于开发和服务企业级移动应用。现在已经在 GitHub ...
2024-01-10React提高02 React性能优化
已同步到个人博客,欢迎访问。PureRenderMixin因为react的diff是在某一个根节点发生变化的时候,调用所有节点进行render,再对生成的虚拟DOM进行对比,如果不变则不对真实DOM进行更新。这就导致了性能的浪费。所以优化针对两方面:拆分组件,有利于组件复用和优化避免不必要的render避免不要的...
2024-01-10如何在React Native中使用OpenCV进行图像处理
如果您曾经想过如何使用带有React Native的OpenCV处理图像,那么您来对地方了。 OpenCV与React Native一起使您能够在移动设备上处理图像 (最有可能要处理由设备相机拍摄的图像)。 这些的最大优点是: 易于实现。 易于使用。 Internet上有很多教程,以及OpenCV的可靠官方文档。 您的移动应用程序...
2024-01-10